// 主色
main-color = #bf2071
main-color = var(--MAIN-COLOR,#bf2071) || #bf2071;
sec-color = #28163D;
sec-color = var(--SEC-COLOR,#28163D) || #28163D;
thr-color = #5A124A;
thr-color = var(--THR-COLOR,#5A124A) || #5A124A;
main-liner = linear-gradient(to bottom right, main-color, thr-color);
sec-color = var(--SEC-COLOR);
thr-color = var(--THR-COLOR);
main-yellow = #E98F36;
main-blue = #E98F36;
tab-icon-color =#fff;
tab-icon-color = var(--TAB-ICON-COLOR,#fff) || #fff;
// 主圆角
main-radius = (5 / 3.75) vw;
// 全圆角
all-radius = (100 / 3.75) vw
//字号
word10 = (10 / 3.75) vw;
word12 = (12 / 3.75) vw;
word14 = (14 / 3.75) vw;
word16 = (16 / 3.75) vw;
word18 = (18 / 3.75) vw
word20 = (20 / 3.75) vw
word26 = (26 / 3.75) vw
word36 = (36 / 3.75) vw
word40 = (40 / 3.75) vw
// 灰度
gray3 = #333
gray6 = #666
gray9 = #999
gray5 = #f5f5f5
gray8 = #f8f8f8
grayE = #efefef
grayF = #fff

backImg = 'http://chenglianyijia.oss-cn-beijing.aliyuncs.com/static/bg.png'
imgBaseUrl = 'http://iryoss3-0.oss-cn-beijing.aliyuncs.com/static/'
// 字号加颜色
word-vw(size, color) {
  font-size: size;
  color: color;
}

//  px转vw(单位转换)
vw(size) {
  (size / 3.75) vw;
}

vh(size) {
  (size / 6.67) vh;
}

//  渐变
//.grad {
//  background: -webkit-linear-gradient(left right, #BF2071, #5A124A); /* Safari 5.1 - 6.0 */
//  background: -o-linear-gradient(bottom right, #BF2071, #5A124A); /* Opera 11.1 - 12.0 */
//  background: -moz-linear-gradient(bottom right, #BF2071, #5A124A); /* Firefox 3.6 - 15 */
//  background: linear-gradient(to bottom right, #BF2071, #5A124A); /* 标准的语法 */
//}

// 分割线(注意看长度，有的是全部，所以做间隔，不引用这个)
line() {
  width calc(100% - 10px)
  height (1 / 3.75) vw
  margin 0 auto
  background-color #f8f8f8
}

//外边距
titleMargin = (5 / 3.75) vw;
smallMargin = (10 / 3.75) vw;
middleMargin = (20 / 3.75) vw;
bigMargin = (30 / 3.75) vw;
//内边距
cellPadding = (15 / 3.75) vw;
//选中按钮
big-solid() {
  width (200 / 3.75) vw
  height (45 / 3.75) vw
  background-color main-color
  text-align center
  line-height (45 / 3.75) vw
  border-radius 30px
  color grayF
}

middle-solid() {
  width (150 / 3.75) vw
  height (45 / 3.75) vw
  background-color main-color
  text-align center
  line-height (45 / 3.75) vw
  border-radius 30px
  color grayF
}

secondary-solid() {
  width (120 / 3.75) vw
  height (35 / 3.75) vw
  background-color main-color
  text-align center
  line-height (35 / 3.75) vw
  border-radius 30px
  color grayF
}

small-solid() {
  width (90 / 3.75) vw
  height (30 / 3.75) vw
  background-color main-color
  text-align center
  line-height (30 / 3.75) vw
  border-radius 30px
  color grayF
}

//未选中按钮
big-hollow() {
  width (200 / 3.75) vw
  height (45 / 3.75) vw
  background-color #f8f8f8
  border 1px solid main-color
  border-radius 30px
  box-sizing border-box
  text-align center
  line-height (45 / 3.75) vw
  color main-color
}

middle-hollow() {
  width (150 / 3.75) vw
  height (45 / 3.75) vw
  background-color #f8f8f8
  border 1px solid main-color
  border-radius 30px
  box-sizing border-box
  text-align center
  line-height (45 / 3.75) vw
  color main-color
}

secondary-hollow() {
  width (120 / 3.75) vw
  height (35 / 3.75) vw
  background-color #f8f8f8
  border 1px solid main-color
  border-radius 30px
  box-sizing border-box
  text-align center
  line-height (35 / 3.75) vw
  color main-color
}

small-hollow() {
  width (90 / 3.75) vw
  height (30 / 3.75) vw
  background-color #f8f8f8
  border 1px solid main-color
  border-radius 30px
  box-sizing border-box
  text-align center
  line-height (30 / 3.75) vw
  color main-color
}

// 居中对齐
flex-center() {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  justify-content center
  align-items center
}

//flex布局沿x轴
flex-x(justify = space-between, align = center) {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  flex-flow: row nowrap;
  justify-content: justify;
  align-items: align
}

//flex布局沿y轴
flex-y(justify = space-between, align = center) {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  flex-flow: column nowrap;
  justify-content: justify;
  align-items: align
}

//文字省略号
ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//多行省略号
multi(row) {
  display: -webkit-box
  -webkit-box-orient vertical
  -webkit-line-clamp: row
  overflow: hidden
  text-overflow: ellipsis
  word-break: normal
  width: auto
  white-space: pre-wrap
  word-wrap: break-word
}

//底部居中确定按钮
btn-center() {
  big-solid()
  position fixed
  bottom vw(10)
  left 50%
  margin-left vw(-100)
}

//跟随居中确定按钮
btn-sta() {
  big-solid()
  margin vw(20) auto
}

//单元格样式
cell() {
  background-color grayF
  height vw(45)
  line-height vw(45)
  padding 0 cellPadding
  display flex
  justify-content space-between
  align-items center
  font-size word14
}

arrow() {
  width vw(12)
  height vw(12)
  fill gray9
}

.icon {
  //  图标主样式
  width vw(15)
  height vw(15)
  vertical-align: -0.15em;
  overflow: hidden;
  fill: gray3
}

.fill9 {
  fill: gray9
}

.fillf {
  fill: grayF
}

// 横线
.line {
  width 100vw
  height 1px
  background gray5
}

.line-10 {
  width 100vw
  height vw(10)
  background gray5
}

.line-5 {
  width 100vw
  height vw(5)
  background gray5
}

.p1 {
  word-vw(word14, gray3)
}

.p2 {
  word-vw(word14, gray9)
}

.p3 {
  word-vw(word14, main-color)
}

.p4 {
  word-vw(word14, grayF)
}

.p5 {
  word-vw(word20, grayF)
}

.p6 {
  word-vw(word40, grayF)
}

//黑色空心按钮
btn-gray() {
  color gray3
  font-size word12
  text-align center
  width vw(90)
  border vw(1) solid gray9
  border-radius vw(15)
  height vw(30)
  line-height vw(30)
}

// 主色空心按钮
btn-main() {
  color main-color
  border vw(1) solid main-color
  font-size word12
  text-align center
  width vw(90)
  border-radius vw(15)
  height vw(30)
  line-height vw(30)
}
